<template>
  <div id="DestructionAreaData"></div>
</template>
<script setup>
import echarts from 'echarts';
import 'echarts-gl';
import { onMounted } from 'vue';
onMounted(() => {
  var hours = [
    'I类',
    'II类',
    'III类',
    'IV类',
    'V类',
    'VI类',
    'VII类',
  ];
  // prettier-ignore
  var days = [ '基本完好', '轻微破坏','中等破坏', '严重破坏', '毁坏',
   ];
  // prettier-ignore
//   var data = [
//     {name:'数据1',value:[1,2,15],
 
//     itemStyle:{
//       color:'pink'
//         // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
//         //       { offset: 0, color: '#E7FFBE' },
//         //       { offset: 1, color: '#95C923' }
//         //     ]),
//     }
// },
//     {name:'数据2',value:[2,3,28],itemStyle:{
//         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
//               { offset: 0, color: '#5096FF' },
//               { offset: 1, color: '#0068FF' }
//             ]),
//     }},
//   ]
var data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0]];


  let myChart = echarts.init(document.getElementById('DestructionAreaData'));
  let option = {
    tooltip: {},
    visualMap: {
      show: false,
      max: 20,
      inRange: {
      color: [
        '#313695',
        '#4575b4',
        '#74add1',
        '#abd9e9',
        '#e0f3f8',
        '#ffffbf',
        '#fee090',
        '#fdae61',
        '#f46d43',
        '#d73027',
        '#a50026'
      ]
    }
    },
    xAxis3D: {
      type: 'category',
      data: hours,
      splitLine: {
        show: false,
      },
      //x轴文字的配置
      axisLabel: {
        textStyle: {
          color: '#FFFFFF',
        },
      },
    },
    yAxis3D: {
      type: 'category',
      data: days,
      splitLine: {
        show: false,
      },
      axisLabel: {
        //y轴文字的配置
        textStyle: {
          color: '#FFFFFF',
        },
      },
    },
    zAxis3D: {
      type: 'value',
      splitLine: {
        show: false,
      },
      axisLabel: {
        //y轴文字的配置
        textStyle: {
          color: '#FFFFFF',
        },
      },
    },
    grid3D: {
      boxWidth: 150,
      // boxDepth: 80,
      viewControl: {
        // projection: 'orthographic'
      },
      light: {
        main: {
          intensity: 1.2,
          shadow: false
        },
        ambient: {
          intensity: 0.3,
          color:'#fff'
        }
      }
    },
    series: [
      {
        type: 'bar3D',
        data:data,
        shading: 'lambert',
        label: {
          fontSize: 16,
          borderWidth: 1,
        },
        emphasis: {
          label: {
            fontSize: 20,
            color: '#900',
          },
          itemStyle: {
            color: '#900',
          },
        },
      },
    ],
  };
  myChart.setOption(option);
});
</script>

<style lang="scss" scoped>
#DestructionAreaData {
  width: 450px;
  height: 320px;
  margin: -60px 0 0 -20px;
}
</style>
